@include b('calendar-date-range-picker') {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  @include e('header') {
    flex-shrink: 0;
    padding: 0 16px;
    color: getCssVar(color, default);
    background-color: getCssVar(color, primary);
  }
  @include e('actions') {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 36px;
    color: getCssVar(color, white);

    @include m('close') {
      font-size: getCssVar(font-size, header-5);
    }
    @include m('save') {
      color: getCssVar(color, fill, 4);
      @include when('select') {
        color: getCssVar(color, white);
      }
    }
  }
  @include e('select') {
    margin: getCssVar(spacing, base) 0 getCssVar(spacing, base);
    text-align: left;
    @include m('placeholder') {
      font-size: getCssVar(font-size, small);
    }
    @include m('range') {
      display: flex;
      gap: getCssVar(spacing, tight);
      align-items: center;
      justify-content: space-between;
      margin: getCssVar(spacing, base) 0;
      font-size: getCssVar(font-size, header-4);
    }
    @include m('range-date') {
      display: flex;
      gap: getCssVar(spacing, tight);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      align-items: center;
    }
    @include m('icons') {
      display: flex;
      gap: getCssVar(spacing, base);
    }
  }
  @include e('content') {
    flex: 1;
  }
  @include e('single-text') {
    margin: getCssVar(spacing, base) 0 getCssVar(spacing, base);
    text-align: left;
    @include m('placeholder') {
      font-size: getCssVar(font-size, small);
    }
    @include m('date') {
      display: flex;
      gap: getCssVar(spacing, tight);
      align-items: center;
      justify-content: space-between;
      margin: getCssVar(spacing, base) 0;
      font-size: getCssVar(font-size, header-4);
    }
    @include m('date-text') {
      display: flex;
      gap: getCssVar(spacing, tight);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      align-items: center;
    }
    @include m('icons') {
      display: flex;

      gap: getCssVar(spacing, base);
    }
  }
  @include e('custom-header') {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    @include m('close') {
      position: absolute;
      right: getCssVar(spacing, base);
    }
  }
  @include e('calendar-container') {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
}
@include b('calendar-date-range-picker-calendar') {
  @include e('today') {
    padding: 4px;
    color: getCssVar(color, primary);
    border: 1px solid getCssVar(color, primary);
    border-radius: 50%;
    width: getCssVar(spacing, extra-loose);
    height: getCssVar(spacing, extra-loose);
    display: flex;
    justify-content: center;
    align-items: center;
    @include m('bottom-info') {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: var(--van-calendar-info-font-size);
      line-height: var(--van-calendar-info-line-height);
    }
  }
  .van-calendar__day--start,
  .van-calendar__day--end {
    @include e('today') {
      color: getCssVar(color, default);
      .ibiz-calendar-date-range-picker-calendar__today--bottom-info {
        display: none;
      }
    }
  }
  .van-calendar__day--selected {
    .van-calendar__selected-day {
      height: 100%;
    }
    @include e('today') {
      color: getCssVar(color, default);
    }
  }
  .van-calendar__day--disabled {
    color: getCssVar(color, disabled, text);
    opacity: 0.7;
  }
}
